<template>
    <!-- 我的 -->
    <view class="mine-box">
        <view class="user-info">
            <image class="touxiang" src="../../static/defautl/banner.png" mode=""></image>
            <text class="name">张三丰</text>
            <image class="home_bg_gr_nor" src="../../static/images/home_bg_gr_nor.png" mode=""></image>
            <view class="order-list">
                <view class="all-box">
                    <view>全部订单</view>
                    <view class="a-r">
                        查看全部运单
                        <image class="home_icon_gend_nor" src="../../static/images/home_icon_gend_nor.png" mode=""></image>
                    </view>
                </view>
                <view class="order-type">
                    <view class="item">
                        <image src="../../static/images/home_icon_dsj_nor.png" mode=""></image>
                        <view>待收件</view>
                    </view>
                    <view class="item">
                        <image style="width: 46rpx;height: 45rpx;" src="../../static/images/home_icon_psz_nor.png" mode=""></image>
                        <view>配上中</view>
                    </view>
                    <view class="item">
                        <image style="width: 43rpx;height: 41rpx;" src="../../static/images/home_icon_dsh_nor.png" mode=""></image>
                        <view>待收货</view>
                    </view>
                    <view class="item">
                        <image style="width: 39rpx;height: 39rpx;" src="../../static/images/home_icon_ywc_nor.png" mode=""></image>
                        <view>已完成</view>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="lists">
            <view class="l-t">
                <view  class="l-l" @click="goto('./consume')">
                    <image style="margin-right: 16rpx;width: 32rpx;height: 38rpx;" src="../../static/images/home_icon_xfjl_nor.png" mode=""></image>
                    消费记录
                </view>
                <image class="home_icon_grgd_nor" src="../../static/images/home_icon_grgd_nor.png" mode=""></image>
            </view>
            <view class="l-t" @click="goto('./address')">
                <view  class="l-l">
                    <image style="margin-right: 16rpx;width: 30rpx;height: 39rpx;" src="../../static/images/home_icon_xfjl_nor.png" mode=""></image>
                    地址管理
                </view>
                <image class="home_icon_grgd_nor" src="../../static/images/home_icon_grgd_nor.png" mode=""></image>
            </view>
            <view class="l-t" @click="goto('./feedback')">
                <view  class="l-l">
                    <image style="margin-right: 16rpx;width: 38rpx;height: 36rpx;" src="../../static/images/home_icon_xfjl_nor.png" mode=""></image>
                    意见反馈
                </view>
                <image class="home_icon_grgd_nor" src="../../static/images/home_icon_grgd_nor.png" mode=""></image>
            </view>
        </view>
        
        <view class="btns" @click="out">
            退出登录
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {}
    },
    watch:{},
    onLoad() {
        
    },
    methods: {
        goto(url){
            uni.navigateTo({
                url: url
            })
        },
        out() {
            uni.showModal({
                title: '提示',
                content: '您确定要退出吗？',
                success: async (res) => {
                    if (res.confirm) {
                        uni.removeStorage({
                            key: '$userInfo'
                        })
                        setTimeout( () => {
                            uni.reLaunch({
                                url: '/pages/login/login'
                            })
                        }, 800)
                    }
                }
            })
            
        }
    }
}
</script>

<style scoped lang="less">
.mine-box{
    width: 100%;
    height: 100%;
}
.user-info{
    width: 750rpx;
    height: 424rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .touxiang{
        margin: 30rpx 0 10rpx 0;
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        z-index: 3;
        font-size: 32rpx;
    }
    .name{
        color: #fff;
        z-index: 3;
    }
    .home_bg_gr_nor{
        width: 750rpx;
        height: 320rpx;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
    }
    .order-list{
        width: 698rpx;
        height: 193rpx;
        background: #fff;
        border-radius: 20rpx;
        position: absolute;
        bottom: 0;
        left: 26rpx;
        z-index: 2;
        
        .all-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 20rpx 30rpx 20rpx;
            font-size: 28rpx;
            .a-r{
                color: #999;
            }
            .home_icon_gend_nor{
                width: 14rpx;
                height: 25rpx;
                margin-left: 10rpx;
            }
        }
        .order-type{
            display: flex;
            justify-content: space-around;
            .item{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #333333;
                font-size: 26rpx;
                image{
                    width: 40rpx;
                    height: 40rpx;
                    margin-bottom: 12rpx;
                }
            }
            
        }
    }
}

.lists{
    width: 698rpx;
    margin: 20rpx 26rpx 0 26rpx;
    padding: 0 20rpx;
    background: #fff;
    border-radius: 20rpx;
    .l-t{
        height: 108rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #cccccc;
        &:last-child{
            border-bottom: none
        }
        &:active{
            background: #F1F1F1;
        }
        .l-l{
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #333;
            font-size: 30rpx;
        }
        .home_icon_grgd_nor{
            width: 14rpx;
            height: 25rpx;
        }
    }
}
.btns{
    width: 600rpx;
    height: 80rpx;
    border-radius: 20rpx;
    text-align: center;
    line-height: 80rpx;
    background: #f04545;
    color: #fff;
    margin: 100rpx auto;
    
    &:active{
        background: #ef2b2b;
    }
}
</style>
